<template>
  <div class="radios-toplist">
    <Title>
      <template #title>
        <span class="title">电台排行榜</span>
      </template>
      <template #right>
        <div class="tabs fpac pr">
          <span
            class="tab cur_p td_u"
            :class="data.currentTab === 0 ? 'a' : ''"
            @click="data.currentTab = 0"
          >上升最快</span>
          <span
            class="tab cur_p td_u"
            :class="data.currentTab === 1 ? 'a' : ''"
            @click="data.currentTab = 1"
          >最热电台</span>
        </div>
      </template>
    </Title>
    <div class="radios fss fw">
      <div class="item fss" v-for="item in list" :key="item.id">
        <img class="cover cur_p" :src="item.picUrl + '?param=200y200'" />
        <div>
          <div class="name">
            <span class="cur_p td_u" :title="item.name">{{ item.name }}</span>
          </div>
          <div class="dj fsc">
            <i class="icon_djradio_category_user"></i>
            <span :title="item.dj.nickname" class="cur_p td_u">{{ item.dj.nickname }}</span>
            <img :src="item.dj.avatarDetail && item.dj.avatarDetail.identityIconUrl" />
          </div>
          <div class="ms">{{ `共${item.programCount}期&nbsp;&nbsp;&nbsp;&nbsp;订阅${item.subCount}次` }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, PropType } from 'vue'
import { useRouter } from 'vue-router'
import { DjRadioType, PaginationType } from '../../types/types'
import Title from '../Title.vue';
// const router=useRouter()

const props = defineProps({
  list: Array as PropType<DjRadioType[]>,
  pagination: Object as PropType<PaginationType>
})

const data = ref({
  currentTab: 1
})

</script>

<style lang="scss" scoped>
.radios-toplist {
  margin-top: 35px;
}
.title {
  font-size: 24px;
}

.tabs {
  width: 160px;
  height: 16px;
  line-height: 16px;

  &::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 1px;
    height: 12px;
    background: #c7c7c7;
    transform: scaleX(0.5);
  }

  span {
    font-size: 12px;
    color: #666;
    &.a {
      color: #c20c0c;
    }
  }
}

.radios {
  .item {
    width: 435px;
    padding: 20px 0;
    &:nth-child(2n) {
      margin-left: 30px;
    }
    .cover {
      width: 120px;
      height: 120px;
    }
    .cover + div {
      margin-left: 20px;
      .name,
      .name span {
        font-size: 18px;
        height: 64px;
        line-height: 64px;
        font-weight: bold;
      }

      .dj {
        margin-bottom: 6px;
        span {
          font-size: 12px;
          color: #333;
          margin: 0 3px 0 6px;
        }
        img {
          width: 13px;
          height: 13px;
        }
      }

      .ms {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>